<template>
  <a-modal
    :visible="visible"
    okText="提交"
    cancelText="关闭"
    :title="title"
    :maskClosable="false"
    :keyboard="false"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="父级菜单">
        <a-tree-select
          v-decorator="[
            'parentId',
            { rules: [{ required: true, message: '请选择父级菜单' }] },
          ]"
          placeholder="请选择父级菜单"
          :treeData="treeData"
          :replaceFields="{ title: 'name', key: 'id', value: 'id' }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="权限名称">
        <a-input
          v-decorator="[
            'name',
            { rules: [{ required: true, message: '请填写权限名称' }] },
          ]"
          placeholder="请填写权限名称"
        />
      </a-form-item>
      <a-form-item label="权限编码">
        <a-input
          v-decorator="[
            'code',
            { rules: [{ required: true, message: '请填写权限编码' }] },
          ]"
          placeholder="请填写权限编码"
        />
      </a-form-item>
      <a-form-item label="排序">
        <a-input-number
          :precision="0"
          :min="0"
          v-decorator="[
            'sort',
            { rules: [{ required: true, message: 'Please input your note!' }] },
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: "menu-info",
  props: {
    record: {
      type: Object,
      default() {
        return {};
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
    menuList: {
      type: Array,
    },
  },
  computed: {
    treeData() {
      return [
        {
          id: "0",
          name: "根节点",
          children: this.menuList,
        },
      ];
    },
    title() {
      return this.record.id ? "修改菜单" : "添加菜单";
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  watch: {
    visible(value) {
      if (value && this.record.id) {
        this.$nextTick(() => {
          const formItems = this.form.getFieldsValue();
          Object.keys(formItems).forEach((key) => {
            formItems[key] = this.record[key];
          });
          this.form.setFieldsValue(formItems);
        });
      }
    },
  },
  mounted() {},
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = "/sys/permissions";
          console.log(this.record);
          url = this.record.id ? `${url}/${this.record.id}/update` : url;
          this.$post(url, { ...values }).then((res) => {
            if (res && res.returnCode === 1000) {
              this.$message.success("保存成功！");
              this.closeModal(true);
            }
          });
        }
      });
    },
    closeModal(freshTable) {
      this.form.resetFields();
      this.$emit("cancel", freshTable);
    },
  },
};
</script>